<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <parent num="1314" age="32" word="好好学习 天天向上"></parent>
    </div>

    <template id="parent">
        <div>
            <h2>parent = parent - 父组件</h2>
            <h2>{{num}} -- {{age}} -- {{word}}</h2>
            <hr>
            <childone v-bind:pro="pro" :city="city" :area="area" :address="address"></childone>
            <hr>
            <childtwo :prop-a="1314" prop-b="2114-daydayup" :prop-c="flag" prop-d="好好学习 天天向上"></childtwo>
        </div>
    </template>
</body>

<template id="childone">
    <div>
        <h2>child-one = 1</h2>
        <h2>地址是{{pro}} - {{city}} -- {{area}} - {{address}}</h2>
    </div>
</template>

<template id="childtwo">
    <div>
        <h2>child - two = 2</h2>
        <h2>我的props === {{propA}} - {{propB}} - {{propC}} - {{propD}}</h2>
    </div>
</template>


<script>
    Vue.component("myhead", {
        template: "<h2>好好学习</h2>"
    })
    Vue.component("parent",{
        template:"#parent",
        data() {
            return {
                pro: "湖北省",
                city: "武汉市",
                area: "江夏区",
                address: "金融港B18",
                flag: !!1
            }
        },
        //组件接受外部数据
        //通过Prop向子元素传递数据   单向数据流
        props: ['num', 'age', 'word'],
        // props  属性   用来传递（父元素传给子组件）组件的参数（动态&静态）  v-bind
        // props   自能用来传递数据    不可修改
        // 动态props   v-bind 
        // 静态props   没有  v-bind

        // props 校验格式

        components: {
            childtwo: {
                template: "#childtwo",
                props: {
                    propA: Number,
                    propB: String,
                    propC: Boolean,
                    propD: [String, Number]
                }
            }
        }
    })
    Vue.component("childone",{
        template:"#childone",
        props:{
            pro:String,
            city:{
                type:String,
            },
            area:{
                type:[String,Number],
                default:'null'
            },
            address:{
                type:[String,Function],
                default:''
            }
        }
    })

    const vm = new Vue({
        data:{
            title:"Vue component 组件传参(props)",
        },
        components:{
            first:{
                template:"<h2>First - vue 组件初始化</h2>"
            }
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
    }).$mount("#app");
</script>

</html>